<template>
	<view v-if="toastPopupShow" class="toastPopupcontent"
		:style="{background:toastType === 'popup'?'rgba(0,0,0,0.5)':''}">
		<block v-if="toastType === 'popup'">
			<view class="popup_box">
				<view class="toast_title">{{toastTitle}}</view>
				<block v-if="showIcon">
					<image class="show_icon"
						src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/cart/Dividersx.png"></image>
				</block>
				<view class="toast_msg">{{toastMsg}}</view>
				<view class="btn_box">
					<view class="btn_style cancel_btn" @click.stop="handleBtnClick('cancel')">{{cancelBtn.text}}</view>
					<view class="btn_style confirm_btn" @click.stop="handleBtnClick('confirm')">{{confirmBtn.text}}</view>
				</view>
			</view>
		</block>
		<block v-if="toastType === 'toast'">
			<view class="toast_box">
				{{toastMsg}}
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				toastPopupShow: false,
				toastType: "", // toast若提示，popup弹窗
				toastMsg: "",
				toastTitle: "",
				showIcon: false,
				confirmBtn: {
					type: 'confirm',
					text: "确定",
					enable: false
				},
				cancelBtn: {
					type: 'cancel',
					text: "取消",
					enable: false
				},
				callBackData: null
			}
		},
		methods: {
			/**
			 * 展示提示框
			 * @param {Object} msg 提示文本
			 * @param {Object} title 标题
			 * @param {Object} showIcon 是否展示标题图标
			 * @param {Object} callBackData 需要暂存回传的数据
			 */
			showPopup({
				msg,
				title = "提示",
				showIcon = true,
				callBackData
			}) {
				if (this.toastPopupShow) return;
				this.toastPopupShow = true;
				this.toastType = 'popup';
				this.toastMsg = msg || "";
				this.toastTitle = title;
				this.showIcon = showIcon;
				this.callBackData = callBackData || null;
			},
			/**
			 * 展示弱提示
			 * @param {Object} msg 弱提示文本
			 * @param {Object} duration 持续时间 默认3秒
			 */
			showToast(msg, duration = 3000) {
				if (this.toastPopupShow) return;
				this.toastPopupShow = true;
				this.toastType = 'toast';
				this.toastMsg = msg;
				setTimeout(() => {
					this.handleResetData();
				}, duration)
			},
			//  页面跳转点击
			handleBtnClick(type) {
				this.$emit('onToastPopupClick', {
					type,
					callBackData: this.callBackData
				})
				//	关闭弹窗
				this.handleResetData();
			},
			//	关闭弹窗 参数重置
			handleResetData() {
				this.toastPopupShow = false;
				this.toastType = "";
				this.toastMsg = "";
				this.toastTitle = "";
				this.showIcon = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toastPopupcontent {
		width: 750rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999999;

		.popup_box {
			width: 654rpx;
			height: 620rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: column;
			padding: 128rpx 64rpx 96rpx 64rpx;
		}

		.toast_box {
			font-size: 28rpx;
			line-height: 48rpx;
			background-color: #000;
			color: #fff;
			font-family: FrankNew-Regular, NotoSansSC-Regular;
			padding: 24rpx 32rpx;
		}

		.toast_title {
			font-family: FrankNew-Medium, NotoSansSC-Medium;
			font-size: 36rpx;
			line-height: 52rpx;
			color: #000;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.show_icon {
			width: 182rpx;
			height: 56rpx;
		}

		.toast_msg {
			font-size: 28rpx;
			line-height: 48rpx;
			font-family: FrankNew-Regular, NotoSansSC-Regular;
			color: #757575;
			text-align: center;
			margin-top: 60rpx;
			margin-bottom: 80rpx;
		}

		.btn_box {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.btn_style {
				font-size: 28rpx;
				width: 255rpx;
				height: 80rpx;
				line-height: 72rpx;
				border-radius: 48rpx 16rpx 48rpx 48rpx;
				border: 2px solid #000000;
				text-align: center;
				font-family: NotoSansSC-Medium;
			}

			.cancel_btn {
				background-color: transparent;
			}

			.confirm_btn {
				background-color: #000;
				color: #fff;
			}
		}
	}
</style>